<template>
    <div>
        <image style="width: 750px;height:1206px;top: 88px;position: absolute;left: 0;right: 0;bottom:0" src="../../resource/img/bgxx.jpg"></image>
        <div class="list-cont">
            <div class="list">
                <div class="panel bg-blue" @click="jump('/map')" >
                    <image style="width: 66px;height:68px;margin-top: 30px;margin-left: 30px;" src="../../resource/img/map.png"></image>
                    <text class=" textTitle">探索地图</text>
                </div>
                <div class="panel bg-red" @click="jump('/learning')" >
                    <image style="width: 66px;height:68px;margin-top: 30px;margin-left: 30px;" src="../../resource/img/video.png"></image>
                    <text class=" textTitle">学习微课</text>
                </div>
            </div>
            <div class="list">
                <div class="panel-w bg-ching" @click="jump('/interaction')" >
                    <image style="width: 66px;height:68px;margin-top: 30px;margin-left: 30px;" src="../../resource/img/interact.png"></image>
                    <text class=" textTitle">学习互动</text>
                </div>
            </div>
        </div>
        <AppHeader :title="headerTitle"></AppHeader>
    </div>
</template>
<script>
    import AppHeader from '../../components/AppHeader.vue'
    import mixins from '../../mixins'
    module.exports = {
        mixins:[mixins],
        components: { AppHeader },
        data() {
            return {
                navList:[],
                headerTitle:"继光生涯",
                lists: [1, 2, 3, 4, 5]
            }
        },
        created(){
            let self=this;
            self.getPageData();
        },
        methods: {

            getPageData(){
                let self=this;
                self.request({
                    url:"/data/index.json"
                }).then(res=>{
                    console.log(res);
                if(res.status==1){
                }
            });
            },
            clickTabItem:function(item){

            },
            clickAppNavItem:function(item){
                this.jump(item.link);
            },
            loadMoreList (event) {

            }
        }
    }
</script>

<style scoped>
    .list-cont{
        top:636px;
        position: fixed;
        overflow-y:hidden;
        left:0;
        width: 750px;
    }
    .list{
        height: 260px;
        width: 750px;
        flex-wrap: wrap;
        margin-left:10px;
    }
    .panel {
        width: 336px;
        height: 240px;
        margin-left:20px;
        flex-direction:column;
        border-radius: 6px;
        box-shadow:0 2px 10px #999999;
    }
    .panel-w{
        height: 240px;
        border-radius: 6px;
        margin-left: 20px;
        width: 690px;
        box-shadow:0 2px 10px #999999;
    }
    .bg-blue{
        background-color: #42B7FF;
    }
    .bg-red{
        background-color: #FE7EA1;
    }
    .bg-ching{
        background-color: #74DDE1;
    }
    .textTitle {
        text-align: left;
        font-size: 40px;
        margin-top: 60px;
        color: #ffffff;
        margin-left:30px;
    }

</style>